<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>06_数据劫持-数据绑定</title>
  <!--
    1. 数据绑定
      * 初始化显示: 页面(表达式/指令)能从data读取数据显示 (编译/解析)
      * 更新显示: 更新data中的属性数据==>页面更新
  -->
</head>
<body>
  <div id="test">
    <p>{{name}}</p>
    <p>{{name}}</p>
    <p>{{wife.name}}</p>
    <button v-on:click="update">更新</button>
  </div>
  <script src="./js/mvvm/mvvm.js"></script>
  <script src="./js/mvvm/compile.js"></script>
  <script src="./js/mvvm/observer.js"></script>
  <script src="./js/mvvm/watcher.js"></script>
  <script>
    const vm = new MVVM({
      el: '#test',
      data: {
        name: 'BZ',
        wife: {
          name: 'binbin',
          age: 20
        }
      },
      methods: {
        update () {
          this.name = 'BZ222'
          this.wife.name = 'CH'
        }
      }
    })

  </script>
</body>

</html>
